
require('rc-calendar/assets/index.css');
var  React = require('react');
var  ReactDOM = require('react-dom');
var  Calendar = require('rc-calendar');
var  DatePicker = require('rc-calendar/lib/Picker');
var  zhCn = require('gregorian-calendar/lib/locale/zh_CN');
var  DateTimeFormat = require('gregorian-calendar-format');
var  GregorianCalendar = require('gregorian-calendar');
var  CalendarLocale = require('rc-calendar/lib/locale/zh_CN');

var  formatter = new DateTimeFormat('yyyy-MM-dd HH:mm:ss');
var  dateFormatter = new DateTimeFormat('yyyy-MM-dd');
var  SHOW_TIME = false;
var  now = new GregorianCalendar(zhCn);
now.setTime(Date.now());
function getFormatter(showTime) {
    return showTime ? formatter : dateFormatter;
}

var GoMeCalender = React.createClass({
    propTypes: {
        defaultValue: React.PropTypes.object,
        defaultCalendarValue: React.PropTypes.object,
    },

    getInitialState() {
        return {
            showTime: this.props.showTime,
            showDateInput: true,
            disabled: false,
            value: this.props.defaultValue,
        };
    },
    reset:function(){
        this.setState({
            value:null
        });
    },
    onChange(value) {
        this.setState({
            value,
        });
    },

    onShowTimeChange(e) {
        this.setState({
            showTime: e.target.checked,
        });
    },

    onShowDateInputChange(e) {
        this.setState({
            showDateInput: e.target.checked,
        });
    },

    toggleDisabled() {
        this.setState({
            disabled: !this.state.disabled,
        });
    },


    render:function(){
        var state = this.state;
        var  calendar = (<Calendar
            locale={CalendarLocale}
            defaultValue={now}
            formatter={state.showTime ? formatter : dateFormatter}
            disabledDate={state.disabledDate}
            />);
        return (<small>
                <DatePicker animation="slide-up" disabled={state.disabled}
                    calendar={calendar} value={state.value} formatter={formatter} onChange={this.onChange}>
                    {
                        ({ value }) => {
                            return (<span tabIndex="0">
                            <input name={this.props.name} className={this.props.className} type="text" placeholder={this.props.placeholder}
                                disabled={state.disabled}
                                style={{outline:"none",paddingLeft:7}}
                                tabIndex="-1"
                                value={value && getFormatter(state.showTime).format(value) || ''}/></span>);
                        }
                    }
                </DatePicker>
        </small>);
    }
});

module.exports = GoMeCalender;